<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06-简单版面向对象选项卡</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    ol,
    li {
      list-style: none;
    }

    .tab {
      width: 400px;
      height: 400px;
      border: 10px solid #333;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
    }

    ul {
      height: 60px;
      display: flex;
    }

    ul>li {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      color: #fff;
      background-color: skyblue;
      cursor: pointer;
    }

    ul>li.active {
      background-color: orange;
    }

    ol {
      flex: 1;
      position: relative;
    }

    ol>li {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      font-size: 100px;
      color: #fff;
      display: none;
      background-color: pink;
      justify-content: center;
      align-items: center;
    }

    ol>li.active {
      display: flex;
    }
  </style>
</head>

<body>
  <div class="tab" id="box">
    <ul>
      <li class="active" index="0">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>
  <div class="tab" id="box2">
    <ul>
      <li class="active" index="0">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ol>
  </div>
  <script>
    /*
    简单版面向对象选项卡

    1.抽象内容
      +一个能够完成选项卡的对象，需要有哪些属性和方法
      +属性：所有可以点击的按钮盒子
      +属性：所有可以切换的选项盒子
      +方法：能添加点击事件的方法
    2.书写构造函数
      +能创建一个对象，包含两个属性和一个方法
      +属性直接写在构造函数体内
      +方法写在构造函数的原型上
      */

    //2.书写构造函数
    function Tabs(ele) {
      //范围
      this.ele = document.querySelector(ele)
      //在范围内找到所有可以点击的盒子
      this.btns = this.ele.querySelectorAll('ul>li')
      //在范围内找到所有需要切换显示的盒子
      this.tabs = this.ele.querySelectorAll('ol>li')

    }

    //原型上书写方法
    Tabs.prototype.change = function () {
      //执行给所有btns里面的 按钮添加点击事件
      //我怎么拿到btns
      //绝对不能直接使用t这个变量 输出tn会报错
      //   console.log(this.btns)

      //提前保存一下this
      var _this = this

      for (var i = 0; i < this.btns.length; i++) {
        //提前保存索引
        this.btns[i].setAttribute('index', i)
        this.btns[i].addEventListener('click', function () {
          // console.log('我被点击了')
          //需要让实例的btns里面的每一个没有active类名
          //需要让实例的tabs里面的每一个没有active类名
          //这里不是在change函数作用域了，而是事件处理函数的作用域
          //在事件处理函数里面，this指向当前事件的事件源
          console.log(_this)
          //当你访问_this的时候，其实是在访问变量
          //自己作用域没有，就会去上一级作用域查找


          for (var j = 0; j < _this.btns.length; j++) {
            _this.btns[j].className = ''
            _this.tabs[j].className = ''
          }
          //当前点击的这个li有active类名
          this.className = 'active'
          //让 实例身上的tabs里面索引对应的哪一个li有active类名
          //拿到当前li身上保存的索引
          var index = this.getAttribute('index')
          _this.tabs[index].className = 'active'
        })
      }
    }

    //使用的时候
    //选项卡就可以使用了
    var t = new Tabs('#box')
    //实例对象在调用方法
    //函数调用方式，对象.函数名（）
    //函数内部的this就是指向 点 前面的xxx
    //我在change函数里面写的this就是t
    t.change()

    //实现第二个选项卡
    var t2 = new Tabs('#box2')
    t2.change()

    console.log(t.change == t2.change)//结果为true
  </script>
</body>

</html>